<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <title>文章阅读</title>
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="../css/master.css" />
    <link rel="stylesheet" href="../css/gloable.css" />
    <link rel="stylesheet" href="../css/nprogress.css" />
    <link rel="stylesheet" href="../css/blog.css" />
    <link rel="stylesheet" href="../css/message.css" />
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
    <link rel="shortcut icon" th:href="@{favicon.ico}" />
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Read</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="/homepage">首页</a></li>
                        <li><a href="/article">博客</a></li>
                        <li><a href="/message">留言</a></li>
                        <li><a href="/link">友链</a></li>
                        <li><a href="/aboutMe">日志</a></li>
                        <li><a href="/loginOut" th:if="${session.name}">退出</a></li>
                        <li><a href="/toUpdateUser"><p th:inline="text" th:if="${session.name}">[[${session.name}]]</p></a></li>
                        <li><a href="/toUpdateUser"  th:if="${session.name}">
                            <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${session.id}+'.jpg'" class="layui-nav-img">
                        </a></li>
                    </ul>
                </nav>
                <a href="/html/login.html"  th:if="not ${session.name}" class="blog-user">
                    <p style="font-family: 楷体">请登录</p>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
            <div class="col-content" style="width:100%">
                <div class="inner">
                    <article class="article-list">
                        <input type="hidden" value="@Model.BlogTypeID" id="blogtypeid" />
                        <section class="article-item">
                            <aside class="title" style="line-height:1.5;">
                                <h4 style="font-family: 楷体" th:text="${article.article_title}"></h4>
                                <p class="fc-grey fs-14">
                                    <small>
                                        作者：<a href="javascript:void(0)" target="_blank" class="fc-link" th:text="${article.user_name}"></a>
                                    </small>
                                    <small class="ml10">围观群众：<i class="readcount" th:text="${article.article_views}"></i></small>
                                    <small class="ml10">更新于 <label th:text="${article.article_time}"></label> </small>
                                </p>
                            </aside>
                            <div class="time mt10" style="padding-bottom:0;">
                            </div>
                            <div id="doc-content"  class="content artiledetail" style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">

                                <textarea style="display:none;" placeholder="markdown" th:text="${article.article_content}"></textarea>

                                <div class="copyright mt20">
                                    <p class="f-toe fc-black">
                                        非特殊说明，本文版权归<a th:text="${article.user_name}"></a> 所有，转载请注明出处.
                                    </p>
                                    <p class="f-toe">
                                        本文标题：
                                        <a href="javascript:void(0)" class="r-title" th:text="${article.article_title}"></a>
                                    </p>
                                    <p class="f-toe">
                                        本文网址：
                                        <a th:href="'/read?article_title='+${article.article_title}" th:text="'/read?article_title='+${article.article_title}"></a>
                                    </p>
                                </div>
                                <div id="aplayer" style="margin:5px 0"></div>
                                <h6>延伸阅读</h6>
                                <ol class="b-relation"></ol>
                            </div>
                            <div class="f-cb"></div>
                            <div class="mt20 f-fwn fs-24 fc-grey comment" style="border-top: 1px solid #e1e2e0; padding-top: 20px;">
                                <img style="width: 600px;height: 450px" th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${article.article_id}+'.jpg'">
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>评论区</legend>
                                <div class="mt20">
                                    <ul class="message-list" id="message-list">
                                        <li class="zoomIn article" th:each="comment : ${comment}">
                                            <div class="comment-parent">
                                                <a name="remark-1"></a>
                                                <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${comment.user_id}+'.jpg'">
                                                <div class="info">
                                                    <span class="username" th:text="${comment.user_name}"></span>
                                                </div>
                                                <div class="comment-content" th:text="${comment.comment_content}">
                                                </div>
                                                <p class="info info-footer">
                                                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                    <span th:text="${comment.comment_ip}"></span>
                                                    <span class="comment-time" th:text="${comment.comment_time}"></span>
                                                </p>
                                            </div>
                                            <hr />
                                        </li>
                                    </ul>
                                </div>
                                <legend>发表评论</legend>
                                <div class="layui-field-box">
                                    <div class="leavemessage" style="text-align:initial">
                                        <form class="layui-form blog-editor" action="">
                                            <input type="hidden" name="article_id" id="article_id" th:value="${article.article_id}">
                                            <div class="layui-form-item">
                                                <textarea id="comment_content" name="message_content" lay-verify="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                                            </div>
                                            <div class="layui-form-item">
                                                <button id="submit" type="button" class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交评论</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </fieldset>
                            <ul class="blog-comment" id="blog-comment"></ul>
                        </section>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="https://github.com/qz501664112/501664112.github.com.git" class="github" target="_blank"><i class="fa fa-github"></i></a>
                        <a href="javascript:void(0)"  onclick="qqShare('http://60.205.188.140:8888/','心如止水,明镜致远','博以至客论坛',null,'http://60.205.188.140:8888/image/501664112.jpg')" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
                        <a href="https://mail.qq.com" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
                        <a href="jweixin://" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2021-2021 初学者 <a style="color: white" href="http://www.mygirlfriends.cn/">mygirlfriends.cn</a> 版权所有 ICP证:<a style="color: white" href="https://beian.miit.gov.cn/">赣ICP备2021004732号</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="../js/yss/gloable.js"></script>
    <script src="../js/plugins/nprogress.js"></script>
    <script src="../js/pagecomment.js"></script>
    <script th:src="@{/editormd/lib/marked.min.js}"></script>
    <script th:src="@{/editormd/lib/prettify.min.js}"></script>
    <script th:src="@{/editormd/lib/raphael.min.js}"></script>
    <script th:src="@{/editormd/lib/underscore.min.js}"></script>
    <script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/editormd/lib/flowchart.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    <script>NProgress.start();</script>
    <script  th:inline="javascript">
        var testEditor;
        $(function () {
            testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true
            });});
        window.onload = function () {
            NProgress.done();
        };
        layui.use('form', function() {
            var form = layui.form;
            $("#submit").on("click", function () {
                console.log([[${session.id}]])
                if ([[${session.id}]] == null) {
                    layer.confirm('请登录后再评论!')
                } else {
                    $.ajax({
                        type: 'post',
                        url: '/comment/toComment',
                        data: {"comment_content":$("#comment_content").val(),"article_id":$("#article_id").val()},
                        success: function (data) {
                            if (data.msg == '200') {
                                window.parent.location.reload();
                            } else {
                                layer.confirm('评论失败!')
                            }
                        },
                        error:function (data) {
                            layer.confirm('评论失败!')
                        }
                    })
                }

            })
        });
    </script>
    <script type="text/javascript">
        function qqShare(url,title,summary,pics){
            var urlPath = "https://connect.qq.com/widget/shareqq/index.html?url="+ encodeURI(url) +
                "&desc=&title=" + title +
                "&summary=" + summary +
                "&pics=" + pics;
            window.open (urlPath, 'qq分享', 'height=637, width=1053, top=195,left=459, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
        }
    </script>
</body>
</html>
